<template>
  <el-dialog
    title="共享"
    :visible.sync="dialogVisible"
    width="500px"
    id="enjoyTogether"
    :before-close="handleClose"
  >
    <div class="ovs">
      <div class="title">共享权限选择</div>
      <div>
        <el-select class="elSelectClass" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          > 
          </el-option>
        </el-select>
      </div>
      <div class="title">共享人员选择</div>
      <div>
        <el-select class="elSelectClass" v-model="value2" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="list">
        <div v-for="(item,idx) in 6" :key="idx">
          <div><img class="headImg" src="@/assets/logo.png" />kelly小宝宝</div>
        <div>
          <img
            @click.stop
            class="actIcon"
            :src="
              !item.active
                ? require('@/assets/duoxuan1@1x.png')
                : require('@/assets/duoxuan2@1x.png')
            "
            alt=""
          />
        </div>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button
        class="btn"
        @click="
          dialogVisible = false;
          $emit('colseFn');
        "
        >取消</el-button
      >
      <el-button
        type="primary"
        @click="
          dialogVisible = false;
          $emit('colseFn');
        "
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      options: [
        {
          value: 1,
          label: "仅查看",
        },
        {
          value: 2,
          label: "可编辑",
        },
      ],
      value: 1,
      options2: [
        {
          value: 1,
          label: "部分用户",
        },
        {
          value: 2,
          label: "所有用户",
        },
      ],
      value2: 2,
    };
  },
  mounted() {},
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit("colseFn");
    },
  },
};
</script>
<style lang="less" scoped>
#enjoyTogether {
  text-align: left;
  .dialog-footer {
    display: flex;
    justify-content: center;
    .btn2 {
      color: #2f7df9;
      border: 1px solid #2f7df9;
      text-align: center; 
    }
    .btn {
      background-color: rgba(153, 153, 153, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
  .ovs {
    max-height: 500px;
    .title {
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      margin-bottom: 8px;
    }
    .elSelectClass {
      width: 100%;
      margin-bottom: 20px;
    }
  }
  .list {
    line-height: 20px;
    border-radius: 10px;
    padding: 18px 14px 8px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    border: 1px solid rgba(233, 239, 253, 1);
    > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(16, 16, 16, 1);
      cursor: pointer;
      font-size: 14px;
      margin-bottom: 10px;
      .headImg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .actIcon {
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>
